<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-calendar v-model="value">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div
                :class="data.isSelected ? 'is-selected' : ''"
                @dblclick="toThread(data.day)"
              >
                {{
                  data.day
                    .split("-")
                    .slice(1)
                    .join("-")
                }}
                <!--标签-->
                <div style="overflow:auto;height:90px">
                  <template v-if="getArr(data.day)">
                      <div
                        v-for="obj in getArr(data.day)"
                        :key="obj.stateId + '$' + obj.typeId"
                        style="width:100%;margin:9px 0px;"
                      >
                        <el-badge
                          :value="obj.count"
                          class="item "
                          style="width:60%;"
                          :type="getState(obj.stateId)"
                        >
                          <el-tag
                            size="mini"
                            :disable-transitions="false"
                            style="overflow:hidden"
                          >
                       
                            {{obj.typeName}}
                          <span v-if="obj.stateId==1">(通过)</span>
                          <span v-if="obj.stateId==2">(驳回)</span>
                          </el-tag>
                        </el-badge>
                      </div>
                  </template>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import TravelAudit from "./input/TravelAudit.vue"
export default {
  name: "Calendar",
  data() {
    return {
      value: new Date(),
      //标签对象
      //type:审核类别  typeName：出差审核 typeId：类别Id  stateId 状态Id  count 数量
      things: {},
    };
  },
  methods: {
    toThread(day) {
      this.$router.push({ path: "toThread/" + day });
    },
    getArr(day) {
      
      return this.things[day + " 00:00:00"];
    },
    //获得当前时间
    getCurrentTime() {
      var date = new Date(); //当前时间
      var month = this.zeroFill(date.getMonth() + 1); //月
      var day = this.zeroFill(date.getDate()); //日
      var hour = this.zeroFill(date.getHours()); //时
      var minute = this.zeroFill(date.getMinutes()); //分
      var second = this.zeroFill(date.getSeconds()); //秒
      //当前时间
      var curTime =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second;

      return curTime;
    },
    //时间补0
    zeroFill(i) {
      if (i >= 0 && i <= 9) {
        return "0" + i;
      } else {
        return i;
      }
    },
    getState(state){
      if(state==0){
          return  'danger'
      }else{
          return  'primary'
      }
    }
  },
  computed: {},
  created () {
          this.$tool.axios("index/listToDo",
                      { date: this.getCurrentTime()},
                      (response )=>{this.things = response.data;} //请求成功返回的数据
                      )
  },
};
</script>
<style>
* {
  margin:0
}

tr {
  height: 120px;
}
td {
  padding: 5px 0 0 0;
}
.el-calendar-day {
  padding: 0 !important;
  margin: 0 !important;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 0;
}
.is-selected {
  color: #1989fa;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.el-tag {
  display: inline-block;
  width: 100%;
}
</style>
